<template>
  <div>
    <!-- 头部组件 -->
    <header-nav></header-nav>
    <!-- 歌单列表 -->
    <div class="songlist">
      <ul class="songitem" v-for="item in palyList" :key="item.id">
        <router-link tag="li" :to="'/rank/songlistdetails?id='+ item.id ">
          <div class="l-img">
            <img :src="item.coverImgUrl" />
          </div>
          <div class="r-song">
            <p
              v-for="(key, index) in item.tracks"
              :key="key.id"
              v-show="index < 3"
            >
              {{ index + 1 }}.{{ key.name }} - {{ key.ar[0].name }}
            </p>
          </div>
        </router-link>
      </ul>
    </div>
  </div>
</template>

<script>
import headerNav from "../components/base/headerNav.vue";
import { getSonglist, getPlaylistDetail } from "../api/rank";
import Vue from "vue";
import { List } from "vant";

Vue.use(List);

export default {
  components: {
    headerNav,
  },
  data() {
    return {
      palyList: [],
      loading: false,
      finished: false,
      refreshing: false,
    };
  },
  beforeRouteEnter(to, from, next) {
    // console.log("路由钩子")
    getSonglist().then((data) => {
      console.log(data)
      //next()保证请求数据执行完成后
      //直接指定methods数据方法，调用方法
      next((vm) => vm.getPlaylistDetailFun(data.list));
    });
  },
  methods: {
    getPlaylistDetailFun(list) {
      for (let i = 0; i < list.length; i++) {
        let id = list[i].id;
        getPlaylistDetail({ id: id }).then((data) => {
          // console.log(data);
          this.palyList.push(data.playlist);
        });
      }
      this.loading = false;
      if (this.palyList.length >= 40) {
        this.finished = true;
      }
    },
  },

};
</script>

<style lang="less">
.songlist {
  .songitem {
    padding: 4px 8px 0 8px;
    li {
      padding: 3px 0;
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #e5e6e7;
      .l-img {
        width: 25%;
        height: 90px;
        border-radius: 4px;
        overflow: hidden;
        img {
          width: 100%;
          display: block;
        }
      }
      .r-song {
        width: 70%;
        p {
          width: 100%;
          height: 17px;
          margin-top: 10px;
          font-size: 14px;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }
      }
    }
  }
}
</style>